<template>
  <view class="container" style="padding-bottom: 90px">
    <!--  tab 栏 -->
    <view class="wh100">
      <view
        class="data-empty-wh100"
        v-if="pageList == null || pageList.length == 0"
      >
        <u-empty :text="`${subject}为空~~`" />
      </view>
      <view v-else class="items-container" style="padding-bottom: 90px">
        <view
          @click="onItemClick(item)"
          class="items"
          :id="`menu-${item.id}`"
          v-for="(item, index) in pageList"
          :key="item.id"
        >
          <text class="item-title">{{ item[itemName] }}</text>
        </view>
        <!-- 加载更多 -->
        <li-loadmore
          :status="loadStatus"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
          @loadmore="onReachBottomEvent"
        />
      </view>
    </view>
    <view class="bottom-add" @click="btnAddClick"> 新建{{ subject }} </view>
  </view>
</template>

<script>
import {
  umodal,
  utoast,
  uShowLoading,
  uHideLoading,
  uNavigateTo,
  uSetNavigationBarTitle,
  uSwitchTab,
} from "../../../utils/uniUtils.js";
import { remarkTypeEnum } from "../../../constants/normalConstants";
import { toastIconEnum } from "../../../constants/uiConstants.js";
import { GetUserCategoryList } from "../../../common/api";
export default {
  data() {
    return {
      itemName: "name", // pageList 每一项的标题
      subject: "会员分类", // 主题
      activeStyle: {
        color: "#F3C45D",
      },
      curCataIdx: 0, // tab的下标
      tabMenus: null, // 上tab
      leftMenus: null, // 左tab
      pageList: [], // 内容列表
      rootRoute: "workbench",
      routeName: "memberCategory",
      isLoaded: false, //  控制页面是否显示
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
      loadStatus: "loadmore",
      loadingText: "努力加载中。。。",
      loadmoreText: "上拉加载更多~~",
      nomoreText: "实在没有了",
    };
  },
  onReachBottom() {
    this.onReachBottomEvent();
  },

  async mounted() {
    uSetNavigationBarTitle(this.subject);
    try {
      uShowLoading();
      await this.GetPageList();
    } catch (error) {
      utoast("页面初始化失败！", "error");
      setTimeout(() => {
        uSwitchTab("/pages/tabBar/staging");
      }, 800);
    } finally {
      uHideLoading();
      this.isLoaded = true;
    }
  },
  methods: {
    /**
     * 触底事件
     */
    onReachBottomEvent() {
      console.log("onReachBottom");
      // 拉新数据再拼接
      if (this.pageList.length < this.total) {
        this.showLoadMore = true;
        setTimeout(async () => {
          uShowLoading();
          await this.GetPageList();
          uHideLoading();
        }, 300);
      } else {
        // utoast("没有更多数据了!", toastIconEnum.error);
        return;
      }
    },
    /**
     *  上tab栏 点击事件
     */
    async onTabClick(e) {
      // console.log(e, "e");
      this.curCataIdx = e.index;
      await this.GetPageList(e.index);
    },

    /**
     * 获取备注列表
     */
    async GetPageList(idx = 0) {
      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      //  有  tabMenu时放开
      //   if (this.tabMenus[idx] != null) {
      if (this.showLoadMore) {
        this.pageNum += 1;
      }
      this.loadStatus = "loading";

      let {
        data: { list, total },
      } = await GetUserCategoryList({
        pageNum: this.pageNum, // 判断是否是tabs点击事件
        pageSize: this.pageSize,
      });

      this.pageList = [...this.pageList, ...list];
      this.total = total;
      if (this.pageList.length == this.total) {
        this.loadStatus = "nomore";
      } else {
        this.loadStatus = "loadmore";
      }
      this.showLoadMore = false;
      // console.log("tagList", list);
      //   }
    },
    /**
     * 添加按钮点击事件
     */
    async btnAddClick() {
      uNavigateTo(
        `/pages/${this.rootRoute}/${this.routeName}/doEdit?mode=add `
      );
    },

    onItemClick(item) {
      uNavigateTo(
        `/pages/${this.rootRoute}/${this.routeName}/doEdit?mode=edit&id=` +
          item.id
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/static/styles/commonStyle.scss";
.container {
  height: 100.1vh;

  .details {
    background-color: #fff;
  }
}
</style>
